<template>
	<view class="formback">

		<uni-forms class="formStyle" :modelValue="formData" label-position="top" :rules="rules" ref="form"
			label-width="auto">
			<view class="background-f">
				<uni-section title="基本信息" type="line">
					<view class="form-item-content">
						<label class="form-item-label">姓名：</label>
						<input type="text" class="form-item-input" disabled="true" v-model="formData.applyUserName"
							placeholder="请输入姓名" />
					</view>

					<view class="form-item-content">
						<label class="form-item-label">联系电话：</label>
						<input type="text" class="form-item-input" disabled="true" v-model="formData.applyPhone"
							placeholder="请输入联系电话" />
					</view>

					<view class="form-item-content">
						<label class="form-item-label">身份证号码：</label>
						<input type="text" class="form-item-input" disabled="true" v-model="maskedIdCard"
							placeholder="请输入身份证号码" />
					</view>
				</uni-section>
			</view>
			<view class="background-f">
				<uni-section title="工会信息" type="line">
					<view class="form-item-content">
						<label class="form-item-label">原工会：</label>
						<input type="text" class="form-item-input" disabled="true" v-model="formData.nowUnionName"
							placeholder="请输入原工会" />
					</view>

					<view class="form-item-content">
						<label class="form-item-label">原工作单位：</label>
						<input type="text" class="form-item-input" disabled="true" v-model="formData.unitName" readOnly
							placeholder="请选择工作单位" />
					</view>

					<view class="form-item-content">
						<label class="form-item-label">转入工会：</label>
						<uni-forms-item name="approvalUnionName" required
							style="width: 100%; margin-left: 15rpx;padding-bottom: 30rpx;">
							<input type="text" class="form-item-input" disabled="true" v-model="formData.approvalUnionName" readOnly
								placeholder="请输入工会名称"  />
						</uni-forms-item>
					</view>
					<view class="form-item-content-heigh">
						<label class="form-item-label">转入工作单位：</label>
						<uni-forms-item name="newInstitution" required
							style="width: 100%; margin-left: 15rpx;padding-bottom: 30rpx;">
							<!-- <uni-easyinput v-model="formData.newInstitution" placeholder="请选择转入工作单位" /> -->
							<input type="text" class="form-item-input"  v-model="formData.newInstitution" readOnly
								placeholder="请输入转入工作单位"  />
						</uni-forms-item>
					</view>

				</uni-section>
			</view>

			<view class="background-f">
				<uni-section title="转会理由" type="line">
					<template v-slot:right>
						<text style="margin-right: 15rpx; font-size: 25rpx; color: rgba(153, 153, 153, 1);">非必填</text>
					</template>
					<view class="textBack">
						<textarea maxlength="200" class="textarea" v-model="formData.transferReason" placeholder=""
							@input="updateRemainingChars"></textarea>
						<text class="remaining-chars">{{ remainingChars }} </text>
					</view>
				</uni-section>
			</view>
		</uni-forms>

		<!-- <view class="agree flex background-f">
			<view class="left">
				<uni-data-checkbox multiple v-model="checkAll" :localdata="hobbyAll"></uni-data-checkbox>
			</view>
			
			<view class="right">
				同意<text class="text">《中华全国总工会转会申请书》</text>
			</view>
		</view> -->

		<view class="btn1 flex">
			<button class="button flex1 " @click="gomembershiptransfer" :loading="buttonLoading">
				提交申请
			</button>
		</view>

		<!-- <citySelectiComponents ref="citySelectiComponentsVue"></citySelectiComponents> -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content-data">
				<treeUnionComponentsVue @selectUnionRow="selectUnionRow" />
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		getCityList
	} from '@/api/system/city';
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	import treeUnionComponentsVue from '@/components/treeUnionComponents.vue'
	import {
		TransferRequestSubmission
	} from '../../api/work/fillintransfer';
import { getAllApprovalNode } from '../../api/work/allNode';
	export default {
		onLoad(option) {
			this.formData = {
				...this.formData,
				...JSON.parse(option.userObj),
				nowUnionName: JSON.parse(option.userObj).unionName
			}

			console.log(this.formData);

		},
		computed: {
			maskedIdCard() {
				const idCard = this.formData.applyIdCard;
				// 假设掩码规则是只显示前6位和后4位
				return idCard ?
					idCard.replace(/^(\d{6})\d+(\d{4})$/, '$1********$2') :
					'';
			}
		},
		onShow() {
			this.getCityListFn()
			
			/**
			 * 转会记录查询
			 */
			getAllApprovalNode().then(res => {
				if(res.data.isTransferReportingLevel){
					uni.redirectTo({
						url: `/pages/work/submittedsuccessfully`
					});
					return
				}
				if (!res.data.transferApprovalCount === false) {
					uni.redirectTo({
						url: `/pages/work/unionsettlement-form-title?showtitle=false&status=${encodeURIComponent(res.data.transferApprovalCount)}&name=${encodeURIComponent(res.data.transferApprovalUnionName)}`
					});
			
				}
			});
		},
		data() {
			return {
				rules: {
					approvalUnionName: {
						rules: [{
							required: true,
							errorMessage: '转入工会不能为空'
						}]
					},
					newWorkUnit: {
						rules: [{
							required: true,
							errorMessage: '转入工作单位不能为空'
						}]
					},

				},
				remainingChars: '',
				buttonLoading: false,
				provinceCityAreaDataObj: {
					text: 'name',
					value: 'id'
				},
				provinceCityAreaData: [],
				checkAll: [],
				hobbyAll: [{
					text: '',
					value: 0
				}],
				visible: {
					originalWorkUnit: false,
					newUnion: false,
					newInstitution: false,
					workUnitLocation: false
				},
				maskCloseAble: true,
				str: '',
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					}
				],
				defaultValue: '440103',
				column: 3,
				formData: {
					applyUserDid: "", // 申请人did
					applyUserName: "", // 申请人姓名
					applyPhone: "", // 申请人手机号
					applyIdCard: "", // 申请人身份证号

					currentunion: "",
					originalWorkUnit: "",
					newUnion: "",
					newInstitution: "",
					transferReason: "",
					newUnionName: "",
					newUnionId: "",
					approvalUnionId: "",
					approvalUnionName: "",
					applyWay: 1, //0 扫码转会1 填报转会
					nowUnionName: null,
				},

			};
		},
		components: {
			cityPicker,
			treeUnionComponentsVue,
		},
		methods: {
			/**
			 * 字符长度计算
			 */
			updateRemainingChars() {
				this.remainingChars = 200 - this.formData.transferReason.length;
			},
			getCityListFn() {
				getCityList().then(res => {
					this.provinceCityAreaData = res.data
				})
			},
			/**
			 * @param {Object} row
			 * 工会选择弹框赋值
			 */
			selectUnionRow(row) {
				console.log(row);
				this.formData.newUnionId = row.id
				this.formData.newUnionName = row.name
				this.formData.approvalUnionName = row.name
				this.formData.approvalUnionId = row.id
				this.formData.approvalUnionName = row.name
				this.$refs.popup.close()
			},

			/**
			 * 打开工会选择弹框
			 */
			handleFocus() {
				this.$refs.popup.open()
			},

			// 提交按钮
			async gomembershiptransfer() {
				try {
					// 验证表单数据
					await this.$refs['form'].validate();

					// 表单验证通过后，打印表单数据
					console.log(this.formData);

					// 开始加载，按钮显示loading状态
					this.buttonLoading = true;

					// 发送请求
					const res = await TransferRequestSubmission(this.formData);

					// 请求成功后关闭loading，并处理响应
					this.buttonLoading = false;
					// console.log(res);
					uni.redirectTo({
						url: `/pages/work/unionsettlement-form-title?showtitle=false&status=${0}&name=${this.formData.approvalUnionName}`
					});
				} catch (err) {
					// 捕获表单验证或请求错误
					this.buttonLoading = false;
					console.log(err);
				}
			},

			showPicker(type) {
				this.$set(this.visible, type, true);
			},
			handleConfirm(type, event) {
				console.log(event);
				// const selectedValue = event.detail.value;  
				// if (type === 'workUnitLocation') {
				//     this.str = selectedValue.name; 
				// } else {
				//     this.formData[type] = selectedValue.name;
				// }
				this.$set(this.visible, type, false);
			},
			handleCancel(type) {
				this.$set(this.visible, type, false);
			}
		}
	}
</script>
<style lang="scss" scoped>
	.remaining-chars {
		position: absolute;
		bottom: 12rpx;
		right: 80rpx;
		color: #e5e5e5;
	}
	
	.popup-content-data {
		width: 100vw;
		height: 100vh;
	}

	.textBack {
		width: 100%;
		margin: 0 30rpx;
		position: relative;

		.textarea {
			width: 630rpx;
			background-color: rgba(245, 245, 245, 1);
			border-radius: 15rpx;
			margin-bottom: 30rpx;
			height: 300rpx;
			padding: 15rpx;
			font-size: 25rpx;
		}
	}

	.formback {
		position: relative;
		width: 100%;
		height: 100%;
		padding-top: 1rpx;
	}

	.uni-forms-item__content {
		width: 100%;
	}

	.formback::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
		background-color: #bd1a2d;
		z-index: -1;
	}

	.form-item-content {
		display: flex;
		align-items: center;
		width: 100%;
		height: 110rpx;
		padding: 0 25upx;
		border-bottom: 1rpx solid rgba(229, 229, 229, 1);
	}

	.form-item-content-heigh {
		display: flex;
		align-items: center;
		width: 100%;
		height: 160rpx;
		padding: 0 25upx;
		border-bottom: 1rpx solid rgba(229, 229, 229, 1);
	}

	.form-item-label {
		font-size: 14px;
		color: rgba(51, 51, 51, 1);
		width: 300rpx;
	}

	.form-item-input {
		text-align: right;
		flex: 1;
		margin-left: 30rpx;
		border: none;
		background: none;
		box-shadow: none;
		border-radius: 4rpx;
		font-size: 14px;
		margin-left: 30rpx
	}

	.background-f {
		margin: 32rpx !important;
		border-radius: 20rpx !important;
		overflow: hidden;
	}

	.agree {
		padding: 32rpx;
		margin-top: 16rpx;

		.left {
			width: 52rpx;
		}

		.right {
			font-size: 12px;

			.text {
				color: rgba(189, 26, 45, 1);
			}
		}
	}
</style>